<template>
  <div>
    <div class="box">
      <img src="../../public/callout.5b86dfc8.svg" alt="" />
      <p>随心写作，自由表达</p>
      <el-button type="primary">开始写文章</el-button>
      <p>发现精彩</p>
    </div>
    <div class="foo">
      <div class="b" v-for="(item, i) in list" :key="i">
        <img :src="item.avatar.url" />
        <p class="name">{{ item.title }}</p>
        <p class="content">{{ item.description }}</p>
        <el-button type="primary" plain style="margin: 15px auto"
        @click="xq(item)"
          >进入专栏</el-button
        >
      </div>
     
    </div>
     <div style="text-align: center; margin: 20px auto">
        <el-button type="primary" plain style="padding: 0 60px" @click="add"
          >加载更多</el-button
        >
      </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  name: "",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const data = reactive({
      info: {
        currentPage: 1,
        pageSize: 6,
      },
      list: [],
      total: 11,
    });
    const getlist = (val) => {
      store.dispatch("getColumns", data.info).then((res) => {
        if (val == "count") {
          data.list=[...data.list,...res.data.list]
          return false
        }
        data.list = res.data.list;
        data.total = res.data.count;
      });
    };
    getlist();
    const add = () => {
      if (data.total > data.list.length) {
        data.info.currentPage++;
        getlist("count");
      }
    };
    const xq=(val)=>{
      let obj={id:val._id,...data.info};
      router.push({
        path:"/detail",
        query:{
          obj:JSON.stringify(obj)
        }
      })
      
    }
    return {
      ...toRefs(data),
      add,
      xq
    };
  },
};
</script>

<style scoped lang='scss'>
.box {
  width: 200px;
  margin: auto;
  text-align: center;
  img {
    width: 200px;
  }
  p {
    margin: 20px auto;
  }
}
.b {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  text-align: center;
  padding: 20px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  img {
    width: 50px;
  }
}
.name {
  margin: 15px auto;
  font-size: 14px;
}
.content {
  font-size: 12px;
  text-indent: 2em;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-height: 20px;
  min-height: 40px;
}
.foo {
  width: 95%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  .b {
    width: 26%;
  }
}
</style>